<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="openAdd(false)">添加</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table :height="tableHeight" :data="tableData" :row-style="setChildColor" row-key="id" :indent="0" border style="width: 100%" :tree-props="{children: 'children'}">
        <el-table-column label="平台名称" prop="name" min-width="180" align="center"></el-table-column>
        <el-table-column label="平台入驻时间" prop="settingDate" min-width="170" align="center"></el-table-column>
        <el-table-column label="管家店铺名称" prop="shopName" min-width="170" align="center"></el-table-column>
        <el-table-column label="统计归类" prop="category" min-width="150" align="center"></el-table-column>
        <el-table-column label="结算币种" prop="currency" min-width="150" align="center">
          <template slot-scope="scope">
            {{getCurrency(scope.row.currency)}}
          </template>
        </el-table-column>
        <el-table-column label="平台属性" prop="rate" min-width="170" align="center">
          <template slot-scope="scope">
            {{scope.row.pid === '0'? '主平台': '子平台'}}
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop="managerName" min-width="150" align="center"></el-table-column>
        <el-table-column label="组员" prop="membersName" min-width="170" align="center"></el-table-column>
        <el-table-column label="是否显示在菜单" prop="updateDate" min-width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.showMenu? '是': '否'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button @click="openAdd(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="delPlat(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="平台管理" :visible.sync="itemDialog" width="600px" :close-on-click-modal="false"> 
      <el-form :model="form" style="padding-right:100px;padding-left: 50px;" label-width="120px">
        <el-form-item label="平台名称：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：">
          <el-input v-model="form.shopName"></el-input>
        </el-form-item>
        <el-form-item label="平台类型：">
          <el-select v-model="form.category" style="width: 100%;" placeholder="请选择">
            <el-option v-for="item in categoryArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算币种：">
          <el-select :filterable="true" v-model="form.currency" style="width: 100%;" placeholder="请选择币种">
            <el-option v-for="item in currencyList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设立时间：">
          <el-date-picker style="width: 100%;" value-format="yyyy-MM-dd" v-model="form.settingDate" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="主平台：">
          <el-select v-model="form.pid" style="width: 100%;"  placeholder="请选择">
            <el-option v-for="item in tableDataCache" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人：">
          <el-tooltip class="item" effect="dark" :disabled="form.managerName.length === 0" :content="form.managerName" placement="bottom">
            <el-input placeholder="请选择" style="width: 210px;" v-model="form.managerName" :disabled="true"></el-input>
          </el-tooltip>
          <el-button @click="selectDingUsers('managerIdArr','managerName','manager', 1)">选择</el-button>
        </el-form-item>
        <el-form-item label="组员：">
          <el-tooltip class="item" effect="dark" :disabled="form.membersName.length === 0" :content="form.membersName" placement="bottom">
            <el-input placeholder="请选择" style="width: 210px;" v-model="form.membersName" :disabled="true"></el-input>
          </el-tooltip>
          <el-button @click="selectDingUsers('membersIdArr','membersName','members', 300)">选择</el-button>
        </el-form-item>
        <el-form-item label="时差：">
          <el-input v-model="form.timeDiff"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="itemDialog = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import formUtil from '@/utils/formUtil'
  import dingMixin from  '@/mixins/ding'

  export default {
    data () {
      return {
        tableData: [],
        categoryArr: [{
          name: 'b2c',
          id: 'b2c'
        },{
          name: 'b2b',
          id: 'b2b'
        }],
        itemDialog: false,
        form: {
          id: '',
          name: '',
          category: '',
          shopName: '',
          settingDate: '',
          pid: '',
          managerIdArr: [],
          manager: '',
          managerName: '',
          membersIdArr: [],
          membersName: '',
          members: '',
          flag: '',
          currency: '',
          timeDiff: ''
        },
        formVerify: {
          name: '请输入平台名称',
          category: '请输入平台类型',
          shopName: '请输入店铺名称',
          settingDate: '请输入设立时间',
          pid: '请输入主平台'
        },
        tableDataCache: [],
        tableHeight: window.tableHeight,
        currencyList: [],
      }
    },
    components:{

    },
    mixins: [dingMixin],
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 220
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 220
      }
    },
    async mounted(){
      this.searchItem()
      this.currencyList = await this.$httpN.postQ('mpb/currency/list', {}, false);
    },
    methods: {
      getCurrency(currency) {
        let name = ''
        this.currencyList.forEach((item) => {
          if(item.code === currency) name = item.name
        })
        return name
      },
      openAdd(item) {
        if(item) {
          let editData = formUtil.deepCopy(item);
          editData.managerIdArr = editData.manager.split(',')
          editData.membersIdArr = editData.members.split(',')
          this.form = editData;
        }else{
          formUtil.resetData(this.form);
        }
        this.itemDialog = true;
      },
      async searchItem() {
        this.tableData = await this.$httpN.postQ('mpb/plat/tree', {isPo: 0})
        this.tableDataCache = formUtil.deepCopy(this.tableData);
        this.tableDataCache.unshift({
          name: '无',
          id: '0'
        })
      },
      setChildColor({row, rowIndex}) {
        if(row.pid !== '0') {
          return {
            background: '#F7F5FA'
          }
        }
      },
      selectDingUsers(ids, name, idsStr, num){
        this.complexPicker(num, [], this.form[ids]).then((data)=>{
          this.form[ids] = data.map(item => item.emplId);
          let names = data.map(item => item.name);
          this.form[name] = names.join(',');
          this.form[idsStr] = this.form[ids].join(',')
        })
      },
      async save() {
        if(!formUtil.verifyData(this.form, this.formVerify)) return;
        let postForm = {
          name: this.form.name,
          manager: this.form.manager,
          managerName: this.form.managerName,
          membersName: this.form.membersName,
          members: this.form.members,
          category: this.form.category,
          shopName: this.form.shopName,
          currency: this.form.currency,
          timeDiff: this.form.timeDiff,
          settingDate: this.form.settingDate,
          pid: this.form.pid,
          flag: 1
        }
        if(this.form.id) postForm.id = this.form.id
        if(!await this.$httpN.postB('mpb/plat/save', postForm)) return;
        this.itemDialog = false;
        formUtil.submitSuccess('保存成功');
        this.searchItem();
      },
      delPlat(id) {
        formUtil.submitConfirm('此操作将永久删除该平台, 是否继续?', async ()=> {
          if(!await this.$httpN.postB('mpb/plat/delete', [id], false)) return;
          formUtil.submitSuccess('删除成功');
          this.searchItem()
        })
      }
    }
  }
</script>
